<!--其他文件消息组件-->
<template>
    <div class="file-msg" @click="downloadFile">
        <div class="info">
            <div class="name">{{filename}}</div>
            <div class="size">{{getShowFileSize()}}</div>
        </div>
        <div class="icon-wap">
            <i class="el-icon-document-copy icon" />
        </div>
    </div>
</template>

<script lang="ts">
import axios from 'axios';
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class OtherFileMsgCom extends Vue {

    $notify: any

    // 文件url
    @Prop({type:String, required:true})
    public content:string|any

    // 文件名
    @Prop({type:String, required:true})
    public filename:string|any

    // 文件字节数
    @Prop({type:Number, required:true})
    public size:number|any

    // 获取用户显示的文件大小
    public getShowFileSize():string{
        const size = this.size as number;
        if(size < 1024){
            return size + 'B';
        }
        if(size < 1024*1024){
            return (size / 1024).toFixed(1) + 'KB';
        }
        if(size < 1024*1024*1024){
            return (size / 1024 / 1024).toFixed(1) + 'MB';
        }
        return (size / 1024 / 1024 / 1024).toFixed(2) + 'GB';
    }

    // 下载文件
    public downloadFile(){
        const down = document.createElement('a');
        down.href = this.content
        down.download = this.filename;
        const ev = document.createEvent("MouseEvent");
        ev.initEvent("click", false, false)
        down.click();
    }

}
</script>

<style lang="less" scoped>
@import '../../css/index.less';
.file-msg{
    display: flex;
    .info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name{
            font-size: 16px;
        }
        .size{
            color: #999999;
            font-size: 10px;
            margin-top: 5px;
        }
    }
    .icon-wap{
        padding: 0px 10px;
       .icon{
            color: @theme-color;
            font-size: 35px;
        }
    }
}
</style>